<template>
    <ul v-bind:class="!index ? 'nav sidebar-menu' :  'submenu'">
        <li v-for="nav in navigation">
            <a v-bind:href="'#/' + nav.url" v-bind:class="{'menu-dropdown': nav.children.length}" @click="active(nav.children.length, $event)">
                <i v-if="nav.icon" v-bind:class="'menu-icon ' + nav.icon"></i>
                <span class="menu-text"> {{ nav.title }} </span>

                <i v-if="nav.children.length" class="menu-expand"></i>
            </a>

            <nav-menu v-if="nav.children.length" :navigation="nav.children" :index="1"></nav-menu>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['navigation', 'index'],
        methods: {
            active(index, event){
                if (index == 0){
                    $(".nav.sidebar-menu li.active").removeClass('active');
                    $(event.target).closest('li').addClass('active');
                }
            }
        }
    }
</script>
